<template>
  <div class="PracticeList">
    <div class="title">内容管理-公共字段管理-{{name}}分类添加列表</div>
    <div class="UserAg_bg">
      <div class="box">
        <div class="Practitop">
          <el-input v-model="search" size="small" class="search" placeholder="请输入名称"></el-input>
          <el-button size="small" class="Prabtn" type="primary" @click="doSearch">查询</el-button>
          <el-button size="small" class="Prabtn" type="primary" @click="search = ''">重置</el-button>
        </div>
        <div class="icon_font">
          <div class="el-icon-circle-plus-outline" @click="addTableList"></div>
          <div class="el-icon-delete" @click="deteleTable"></div>
        </div>
      </div>
      <div class="table">
        <el-table
          class="tabheader"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="编号" type="index" width="180"></el-table-column>
          <el-table-column label="名称" width="180">
            <template slot-scope="scope">
              <input
                type="text"
                v-if="editActive==scope.row.id"
                v-model="scope.row.content"
                class="linpName"
              >
              <div v-else>{{scope.row.content}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="排序" width="190">
            <template slot-scope="scope">
              <input
                type="text"
                v-if="editActive==scope.row.id"
                v-model="scope.row.num"
                class="linp"
              >
              <div v-else>{{scope.row.num}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                class="tableBtn"
                size="mini"
                v-if="editActive != scope.row.id"
                @click="handleEdit(scope.row.id)"
              >编辑</el-button>
              <el-button
                class="tableBtn"
                size="mini"
                v-if="editActive == scope.row.id"
                @click="handleSubmit(scope.row)"
              >保存</el-button>
              <el-button
                class="tableBtn"
                size="mini"
                v-if="id == 13"
                @click="doSecond(scope.row.id)"
              >添加二级列表</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PracticeList',
  data() {
    return {
      editActive: -1,
      id: '',
      name: '',
      search: '',
      deleteRow: [],
      tableData: []
    }
  },
  methods: {
    initData() {
      if (this.$route.query.name) {
        this.name = this.$route.query.name
      }
      this.id = this.$route.query.id
      let url = '/platform/selectStaticData.do'
      let params = { state: this.id }
      if (this.$route.query.type) {
        url = '/platform/selectStaticDataById.do'
        params = { parantId: this.id }
      }
      this.lAxios({
        method: 'post',
        url: url,
        params: params
      }).then(res => {
        console.log(res)
        this.tableData = res.data.data[this.id]
      })
    },
    handleEdit(id) {
      this.editActive = id
    },
    doSearch() {
      let url = '/platform/selectStaticData.do'
      let params = { state: this.id, content: this.search }
      if (this.$route.query.type) {
        url = '/platform/selectStaticDataById.do'
        params = { parantId: this.id, content: this.search }
      }
      //数据筛选
      this.lAxios({
        method: 'post',
        url: url,
        params: params
      }).then(res => {
        console.log(res)
        this.tableData = res.data.data[this.id]
      })
    },
    handleSelectionChange(row) {
      this.deleteRow = row
    },
    addTableList() {
      //添加列表
      this.tableData.push({ id: '', typeId: this.id, num: '' })
      this.$message({ message: '添加成功', type: 'success' })
    },
    deteleTable() {
      //删除列表
      let detele = []
      this.deleteRow.forEach(item => {
        if (item.id != '') {
          detele.push(item.id.toString())
        }
      })
      console.log(detele)
      this.lAxios({
        method: 'post',
        url: '/platform/deleteStaticData.do',
        params: {
          ids: detele.join()
        }
      }).then(res => {
        console.log(res)
        if (res.data.status == 0) {
          this.$message({ message: '删除成功', type: 'success' })
        }
        this.initData()
      })
    },
    handleSubmit(row) {
      this.editActive = -1

      let params = {
        id: row.id,
        typeId: row.typeId,
        content: row.content,
        num: row.num
      }

      let url = '/platform/updateStaticData.do'
      if (row.id == '') {
        url = '/platform/addStaticData.do'
        if (this.$route.query.type) {
          params = {
            id: row.id,
            typeId: -1,
            parentId: this.id,
            content: row.content,
            num: row.num
          }
        }
      } else {
        url = '/platform/updateStaticData.do'
      }
      console.log(row)
      this.lAxios({
        method: 'post',
        url: url,
        params: params
      }).then(res => {
        console.log(res)
        if (res.data.status == 0) {
          this.$message({ message: '编辑成功', type: 'success' })
        }
        this.initData()
      })
    },
    doSecond(id) {
      this.$router.push({
        path: '/PracticeList',
        query: { id: id, type: 'sec' }
      })
      this.initData()
    }
  },
  activated() {
    this.initData()
  }
}
</script>

<style scoped>
.PracticeList {
  width: 100%;
  height: 100vh;
  margin-left: 10px;
  background-color: #f7f9fc;
}
.title {
  height: 43px;
  line-height: 43px;
}

.UserAg_bg {
  width: 100%;
  min-height: 600px;
  background-color: white;
  padding: 0 0 20px 0;
}
.Practitop {
  padding-top: 27px;
  margin-left: 25px;
}
.search {
  width: 239px;
}
.Prabtn {
  width: 49px;
  height: 32px;
  background-color: #3377ff;
  margin-right: 25px;
  padding: 0;
}
.box {
  display: flex;
  flex-direction: row;
}
.icon_font {
  font-size: 22px;
  padding-top: 27px;
  margin-left: 20px;
}
.icon_font > div:nth-child(1) {
  /*color: #199ed8;*/
  margin-right: 30px;
}
.table {
  width: 96%;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid #f7f7f7;
  margin-top: 27px;
}
.tableBtn {
  width: 140px;
  height: 39px;
  font-size: 14px;
  color: #3377ff;
}

.linp {
  width: 25px;
  height: 25px;
  text-align: center;
}
.linpName {
  width: 140px;
  height: 25px;
}
</style>
